<template>
	<view class="rootElement">
		<!-- 全选按钮 -->
		<view class="selectAllContainer">
			<label class="radio" @click="getFullChecked">
				<radio color="#c00000" :checked="fullChecked" /><text>全选</text>
			</label>
		</view>

		<!-- 商品总价 -->
		<view class="totalContainer">
			合计: <text>￥{{ selectedPrice }}</text>
		</view>

		<!-- 结算按钮 -->
		<view class="btnContainer" @click="settlement"> 结算({{ selectedAmount }}) </view>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import MyAddress from '../my-address/my-address.vue'
export default {
	name: 'my-settle',
	data() {
		return {
			second: 3,
			timerID: ''
		}
	},
	computed: {
		...mapGetters('m_cart', ['selectedAmount', 'fullChecked', 'selectedPrice', 'orderGoodsInfo']),
		...mapGetters('m_user', ['showSelected']),
		...mapState('m_user', ['token', 'isPopup'])
	},
	methods: {
		...mapMutations('m_cart', ['updateAllState']),
		...mapMutations('m_user', ['updateRedirectInfo', 'popupAddress']),
		// 定义全选按钮点击事件回调
		getFullChecked() {
			this.updateAllState({ state: !this.fullChecked })
		},

		// 定义结算按钮的点击事件回调
		settlement() {
			// 1. 先判断是否勾选了要结算的商品
			if (!this.selectedAmount) return uni.$showMsg('请选择要结算的商品')
			// 2. 再判断用户是否选择了收货地址
			if (!this.showSelected) {
				uni.$showMsg('请选择收货地址')
				// 通过Vuex调用my-address组件自身的弹出层点击事件
				return setTimeout(() => {
					this.popupAddress(!this.isPopup)
				}, 1500)
			}
			// 3. 最后判断用户是否登录了，未登录将自动跳转至登录页
			if (!this.token) return this.delayNavigation()
			// 所有条件都通过，执行支付功能
			this.payForOrder()
		},

		// 定义延时3s跳转至我的页面的登录页（tab页）函数
		delayNavigation() {
			// 先调用一次提示框，并设置透明遮罩mask防止用户点击页面
			uni.$showMsg(`登录后方可结算，${this.second} 秒后自动跳转至登录页面`, true)

			// 设置定时器，每1s执行一次
			this.timerID = setInterval(() => {
				// 注意，定时器是先计时，然后再执行函数，因此需先自减再判断秒数是否为0
				this.second--
				// 当秒数被减至0时，表示定时器已执行3次，延时了3秒
				if (this.second <= 0) {
					// 清除定时器并重置秒数
					clearInterval(this.timerID)
					this.second = 3
					// 跳转至我的页面
					uni.switchTab({
						url: '/pages/mine/mine',
						success: () => {
							// 跳转成功则向m_user模块中保存重定向信息对象
							this.updateRedirectInfo({
								openType: 'switchTab',
								fromUrl: '/pages/cart/cart'
							})
						}
					})
					// 停止定时器的同时，也应立即退出函数，不再执行后续代码（让提示框消失）
					return
				}
				uni.$showMsg(`登录后方可结算，${this.second} 秒后自动跳转至登录页面`, true)
			}, 1000)
		},

		// 定义结算按钮的支付函数
		async payForOrder() {
			// 一、创建订单
			// 1.创建订单信息对象，属性名参考后端接口文档，按要求准备请求参数
			const orderInfo = {
				order_price: 0.01, // 订单总价，应使用m_cart模块getter的selectedPrice，为方便调试暂不使用
				consignee_addr: this.showSelected, // 用户选择的收货地址
				goods: this.orderGoodsInfo // 订单商品信息对象
			}
			// 2.发起创建订单的请求
			const { data: res1 } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
			if (res1.meta.status !== 200) return uni.$showMsg('创建订单失败！')
			// 3.得到服务器响应的“订单编号”
			const orderNumber = res1.message.order_number

			// 二、订单预支付
			// 1.将上一步服务器获取的订单编号作为请求参数，发起获取订单支付信息的请求
			const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
				order_number: orderNumber
			})
			if (res2.meta.status !== 200) return uni.$showMsg('创建预付订单失败！')
			// 2.得到订单支付相关的必要参数对象
			const paymentInfo = res2.message.pay

			// 三、发起微信支付
			// 1.调用uni.requestPayment()发起微信支付，并传入上一步获取的订单支付信息对象
			// const [error, success] = await uni.requestPayment(paymentInfo)
			// // 2.检查支付是否成功，首先判断支付接口是否调用成功，其次需通过服务器二次检查订单支付状态
			// const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber })
			// // 支付接口调用失败，或服务器二次检测未支付，提示用户支付失败
			// if (error || res3.meta.status !== 200) {
			// 	uni.$showMsg('支付失败！')
			// } else {
			// 	// 否则提示用户支付成功
			// 	uni.$showMsg('支付成功！', false, 'success')
			// }

			// 个人开发者不支持调用微信支付
			uni.$showMsg('暂不支持微信支付功能')
		}
	}
}
</script>

<style scoped lang="scss">
.rootElement {
	height: 50px;
	padding-left: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	background-color: #fff;
	// 全选按钮
	.radio {
		display: flex;
		align-items: center;
	}
	// 商品总价
	.totalContainer {
		text {
			color: #c00000;
			font-weight: 700;
		}
	}
	// 结算按钮
	.btnContainer {
		padding: 0 10px;
		min-width: 100px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		color: #fff;
		background-color: #c00000;
	}
}
</style>
